<?php
/**
 * 博客分类组件
 * 用于展示博客文章的分类导航
 */
$configKey = isset($configKey) ? $configKey : 'blog-categories';
// 从页面配置获取博客分类组件配置，使用默认值作为后备
$data = array_merge([
    'section_id' => $configKey,
    'section_pretitle' => '博客分类',
    'section_title' => '博客分类',
    'section_subtitle' => '博客分类',
    'categories' => [
        ['id' => 'all', 'name' => '全部文章', 'count' => 42],
        ['id' => 'web-dev', 'name' => '网页开发', 'count' => 18],
        ['id' => 'mobile-dev', 'name' => '移动开发', 'count' => 12],
        ['id' => 'ux-design', 'name' => 'UX设计', 'count' => 8],
        ['id' => 'tech-news', 'name' => '技术资讯', 'count' => 4]
    ],
    'tag_class' => 'tag-pill',
    'active_class' => 'bg-primary text-white',
    'inactive_class' => 'bg-gray-100 text-gray-700 hover:bg-gray-200',
    'scrollbar_class' => 'scrollbar-hide',
    'flex_space' => '2',
    'padding_bottom' => '2',
    'margin_bottom' => '12'
], $pageConfig['components'][$configKey] ?? []);

// 处理分类激活状态
$activeCategory = $_GET['category'] ?? 'all';
$currentPage = isset($_GET['page']) ? '&page=' . $_GET['page'] : '';
$currentTag = isset($_GET['tag']) ? '&tag=' . $_GET['tag'] : '';
?>

<!-- 分类导航 -->
<div id="<?= $data['section_id'] ?>" class="mb-<?= $data['margin_bottom'] ?> overflow-x-auto <?= $data['scrollbar_class'] ?>">
    <div class="flex space-x-<?= $data['flex_space'] ?> pb-<?= $data['padding_bottom'] ?> min-w-max">
        <?php foreach ($data['categories'] as $category): ?>
            <a 
                href="/blog.php?category=<?= htmlspecialchars($category['id']) ?><?= $currentPage ?><?= $currentTag ?>"
                class="<?= $data['tag_class'] ?> <?= $activeCategory === $category['id'] ? $data['active_class'] : $data['inactive_class'] ?>"
            >
                <?= htmlspecialchars($category['name']) ?>
                <span class="ml-1 opacity-80">(<?= $category['count'] ?>)</span>
            </a>
        <?php endforeach; ?>
    </div>
</div>